<template>
  <el-container>
    <el-header>
      <div class="logoImg">
        <img src="../assets/logo.png" width="100%" height="100%" />
      </div>
      <span>VUE的练习作业</span>
      <el-button type="info" class="rightBtn">退出</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 导航栏 -->
        <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.autName}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>导航一</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      menuList: []
    };
  },
  // 生命周期开始阶段
  created() {
    this.$http.get("getMenuList").then(res => {
      this.menuList = res.data;
      console.log(res);
    });
  },
  methods: {}
};
</script>
<style scoped>
.el-container {
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-header {
  background-color: #2c3e50;
  /* 弹性分布,让盒子元素上下居中 */
  display: flex;
  /* 调整盒子内边距为0 */
  padding-left: 0;
  /* 让盒子元素纵向上下居中 */
  align-items: center;
  /* 调整文本颜色为白色 */
  color: #ecf0f1;
}
.el-aside {
  background-color: #bdc3c7;
}
.el-main {
  background-color: #ecf0f1;
}
.el-footer {
  background-color: #7f8c8d;
}
.logoImg {
  width: 78px;
  height: 65px;
}
.logoText {
  left: 0px;
}
/* 调整位置到最右边去 */
.rightBtn {
  position: absolute;
  right: 0px;
}
</style>